
<template>
	<div >
		<div style="display: flex; justify-content: center;margin-top: 30px;">
			<h3>
				在职状态
			</h3>
		</div>
		<div>
			<v-chart style="height:170px;" :option="option"></v-chart>
		</div>
	</div>
</template>

<script>
import sexRatioService from "@/api/organization/sexRatioService.js";
export default {
	data() {
		return {
            User:{},
			charData:[
				{
					value: 1,
					name: "在职",
				},
				{
					value: 1,
					name: "下岗",
				},
			],
			option: {},
			loading: false,
			
		};
	},
	mounted() {
		this.init()
	},
	
	watch: {
		
	},
	methods: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
		init(){
			this.loading = true;
            this.User=this.currentUser()
			let postId=this.User.postIdList[0]
            if(this.User.name==="管理员"){
                postId=''
            }
			sexRatioService.selectStatusRatio(postId)
			.then((data)=>{
				this.charData[0].value=data.on
				this.charData[1].value=data.off
				this.initChart()
				this.loading = false;
			});
		},
		initChart(){
			this.option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:({d}%)',
                    },
                    legend: [
                        {
                            top: '5%',
                            orient: 'vertical',
                            left: '5%',
                            itemWidth: 16,
                            itemHeight: 16,
                            icon: 'circle',
                            itemGap: 20,
                            textStyle: {
                            color: 'black',
                            fontSize: 15,
                            padding: [0, 0, 0, 10],
                            },
                            data: ['在职', '下岗'],
                        }
                        
                    ],
                    grid: {
                        containLabel: true,
                    },
                    series: [
                        {
                        type: 'pie',
                        radius: ['30%', '60%'],
                        center: ['50%%', '60%'],
                        color: [
                            '#2CAA3F',
                            '#FFB933',
                            
                        ],
                        label: {
                            position: 'outside',
                            show: true,
                            color: 'black',
                            textBorderWidth: 1,
                            fontSize: 16,
                            formatter: function (params) {
                            if (params.name !== '') {
                                return params.name ;
                            }
                            },
                        },
                        labelLine: {
                            show: true,
                            length2: 10,
                            length: 10,
                        },
                        data:this.charData,
                        },
                    ],
                    }

		}
	},
};
</script>
<style scoped>

</style>
